<style>
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .logo {
        width: 40px;
        height: 40px;
        margin: 10px;
    }

    .title {
        color: #fff;
        font-size: 17px;
        display: inline-block;
        position: relative;
        top: -23px;
    }

    .ivu-poptip-title {
        margin: 0;
        padding: 0 !important;
        position: relative;
    }

    .ivu-poptip-inner {
        width: 100px !important;
        margin: auto !important;
    }

    .ivu-layout-header {
        padding: 0px 5px 2px 2px !important;
    }
</style>
<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto', zIndex: '2'}">
            <img src="../../assets/icon.png" class="logo" alt="默认图标"/>
            <span class="title">后台管理</span>
            <!--菜单-->
            <Menu theme="dark" width="auto" :active-name.sync="activeName" @on-select="handleChange">
                <template v-for="item in menu " v-if="item.child !==null">
                    <Submenu :name="item.name">
                        <template slot="title">
                            <Icon type="ios-analytics"/>
                            {{item.name}}
                        </template>
                        <template v-for="child in item.child">
                            <menu-item :name="child.url">{{child.name}}</menu-item>
                        </template>
                    </Submenu>
                </template>
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: left+'px'}">
            <!--Header-->
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                <Row>
                    <Col span="22">
                        <div ref="scrollAll"
                             style="position: relative;width: 100%;box-sizing: border-box;padding: 8px 0;height: 50px">
                            <div style="overflow:hidden;width:100%;position: absolute;height: 100%">
                                <template v-for="item in menuTag">
                                    <Tag type="dot" closable :color="item.status?'primary':'default'"
                                         :path="item.path" @on-close="closed(item)" @click.native="tagsClick(item)"
                                         @click.native.right="mouseRight(item,$event)">
                                        {{item.name}}
                                    </Tag>
                                </template>
                            </div>
                            <Poptip v-model="visible" placement="bottom" style="margin-top: 20px" id="tip">
                                <div slot="title" @click="closedOther" style="text-align: center">
                                    <DropdownItem>关闭其他</DropdownItem>
                                </div>
                                <div slot="title" @click="closedAll" style="text-align: center">
                                    <DropdownItem>关闭所有</DropdownItem>
                                </div>
                            </Poptip>
                        </div>
                    </Col>
                    <Col span="2">
                        <div style="float: right">
                            <Avatar :src="avatar" @click="changeHeader"/>
                            <input type="file" id="avatar" ref="avatar" accept="image/*" v-show="false"
                                   @change="headerChange">
                            <Dropdown @on-click="menuClick">
                                <a href="javascript:void(0)">
                                    {{username}}
                                    <Icon type="arrow-down-b"/>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem name="4" v-has="this.$res.userGetOne">基本信息</DropdownItem>
                                    <DropdownItem name="5" v-has="this.$res.userChangeHeader">更换头像</DropdownItem>
                                    <DropdownItem name="2" v-has="this.$res.changePassword">密码修改</DropdownItem>
                                    <DropdownItem name="3">退出登录</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                    </Col>

                </Row>
            </Header>
            <!--内容-->
            <Content>
                <Card>
                    <div style="padding-bottom: 100px">
                        <router-view @remove="remove"/>
                    </div>
                </Card>
            </Content>
        </Layout>
    </div>
</template>
<script>
    export default {
        name: 'navigation',
        metaInfo: {
            title: '后台管理',
        },
        data() {
            return {
                username: "",
                activeName: '',
                tag: null,
                visible: false,
                // 定义左边导航菜单宽度像素
                left: 200,
                // 用来保存鼠标右键点击的按钮信息
                tagRight: null,
                avatar: '',
                tempTag: [],// 临时多余标签存放
            }
        },
        mounted() {
            this.username = this.getUserInfo().username;
            let avatar = this.getUserInfo().avatar;
            if (avatar) {
                if (avatar.indexOf("http://") === -1) {
                    this.avatar = this.staticUrl + avatar;
                } else {
                    this.avatar = avatar;
                }
            } else {
                this.avatar = "https://i.loli.net/2017/08/21/599a521472424.jpg";
            }

        },


        methods: {
            // 点击个人信息和密码修改的下拉菜单项事件
            menuClick(val) {
                if (val === '3') {
                    this.$router.push('/');
                    // 退出登录后,就清除session中数据
                    sessionStorage.clear()
                }
                if (val === '2') {
                    this.$router.push("/core/updatePassword")
                }
                if (val === '4') {
                    this.$router.push({path: '/bs/userInfo/userEdit', query: {userId: this.getUserInfo().id}})
                }
                if (val === '5') {
                    this.changeHeader();
                }

            },
            // 菜单选中事件
            handleChange(name) {
                this.activeName = name
                this.$router.push(name)
            },
            // 点击X 关闭标签事件
            closed(item) {
                let mTag = this.menuTag;
                // 判断大于1 是避免把首页也关闭了
                if (mTag.length > 1) {
                    mTag.map(function (x, index) {
                        // index!==0 是防止关闭首页
                        if (x.path === item.path && index !== 0) {
                            mTag.splice(index, 1)
                            return;
                        }
                    })
                    this.menuTag = mTag;
                    //设置最后一个为标签页
                    if (this.$route.path !== mTag[mTag.length - 1].path) {
                        this.$router.push({path: mTag[mTag.length - 1].path, query: mTag[mTag.length - 1].query})
                    }
                }
            },
            //关闭全部标签事件
            closedAll() {
                this.$router.push(this.menuTag[0].path)
                this.menuTag = null;
                this.visible = false
                // 临时标签为空
                this.tempTag = []

            },
            // 关闭其他按钮
            closedOther() {
                // 保留首页与当前标签
                if (this.tagRight.path === this.menuTag[0].path) {
                    this.menuTag = [this.menuTag[0]]
                    this.menuTag[0].status = true
                } else {
                    this.menuTag = [this.menuTag[0], this.tagRight];
                }
                this.tempTag = []
                this.visible = false
            },
            // 标签点击事件
            tagsClick(item) {
                if (this.$route.path !== item.path) {
                    this.$router.push({path: item.path, query: item.query})
                }
            },
            // 鼠标右键事件
            mouseRight(item, event) {
                // 禁用鼠标右键默认弹出
                event.view.oncontextmenu = function () {
                    return false;
                }
                // 设置显示关闭标签
                this.visible = true
                // 设置显示位置
                let dom = document.getElementById("tip")
                dom.style.display = "block";
                dom.style.position = "absolute"
                dom.style.left = event.x - this.left + "px";
                // 记录点击的按钮
                this.tagRight = item
            },
            /***
             * 全局删除提示操作
             * @param params 参数
             * @param reload 删除成功后的处理方法
             */
            remove: function (params, reload) {
                this.$Modal.confirm({
                    title: '删除确定',
                    content: '<p>你确定要删除该' + params.msg + '吗?删除后不可撤销</p>',
                    onOk: () => {
                        this.$kit.ajaxDelete(params.permissionId, {id: params.id}, (res) => {
                            this.$Message.success('删除成功')
                            this.$router.go(0)
                        }, this)
                    },
                    onCancel: () => {
                        this.$Message.info('取消操作')
                    }
                })

            },
            /***
             * 头像更换
             */
            changeHeader: function () {
                document.getElementById("avatar").click();
            },
            /***
             * 修改头像
             */
            headerChange: function () {
                let formData = new FormData();
                formData.append('img', this.$refs.avatar.files[0])
                this.$kit.ajaxFormData(this.$res.userChangeHeader, formData, (res) => {
                    this.$Message.success('修改成功')
                    this.avatar = this.staticUrl + res.data.data;
                }, this)
            }

        },
        computed: {
            // 通过计算属性来获取用户权限菜单
            menu() {
                return JSON.parse(this.$kit.getSession(this.$kit.menuName));
            },
            //标签页获取计算与循环
            menuTag: {
                get: function () {
                    this.tag = JSON.parse(this.$kit.getSession(this.$kit.menuTag))
                    if (this.tag == null) {
                        this.tag = [{name: '首页', path: '/index', status: true}];
                    }
                    return this.tag;
                },
                set: function (value) {
                    this.$kit.setSession(this.$kit.menuTag, JSON.stringify(value))
                    this.tag = value;

                }
            },
            // 通过计算属性来确定

        },
        watch: {
            // 监听路由变化,用来修改标签页
            $route(to, from) {
                let mTag = this.menuTag;
                let status = false
                // 设置其他为false 并且如果已经存在了,就直接修改状态就好了
                mTag.map(function (item, index) {
                    mTag[index].status = false;
                    if (item.path === to.path) {
                        mTag[index].status = true
                        status = true
                    }
                })
                // 添加一个新的标签
                if (!status) {
                    mTag[mTag.length] = {name: to.name, path: to.path, query: to.query, status: true};
                }
                // 最多展示10个标签
                if (mTag.length > 10) {
                    this.tempTag.push(mTag[0])
                    mTag.shift();
                } else {
                    if (this.tempTag.length > 0) {
                        let tmp = [];
                        tmp.push(this.tempTag.pop())
                        tmp.push(...mTag);
                        mTag = tmp;
                    }
                }
                this.menuTag = mTag;
            }
        }
    }
</script>
